import React from 'react'
import { Button, Result } from 'antd'
import { Link, useNavigate } from 'react-router-dom'
import { HomeOutlined, ArrowLeftOutlined } from '@ant-design/icons'

const NotFoundPage: React.FC = () => {
  const navigate = useNavigate()

  const goBack = () => {
    navigate(-1)
  }

  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
      <div className="container mx-auto px-4">
        <div className="max-w-md mx-auto text-center">
          <Result
            status="404"
            title="404"
            subTitle="抱歉，您访问的页面不存在"
            extra={
              <div className="space-y-4">
                <Button 
                  type="primary" 
                  size="large" 
                  icon={<HomeOutlined />}
                  onClick={() => navigate('/')}
                  block
                >
                  返回首页
                </Button>
                <Button 
                  size="large" 
                  icon={<ArrowLeftOutlined />}
                  onClick={goBack}
                  block
                >
                  返回上页
                </Button>
              </div>
            }
          />
        </div>
      </div>
    </div>
  )
}

export default NotFoundPage